<template>
    <a-card :bordered="false" class="cardHeight">
        <div class="bodyContent">
            <div id="player">点击“渲染视频流”按钮开始</div>
            <div class="header-bar" ref="headerBar">
                <div :class="headerIndex === 0 ? 'bar-item-active bar-item' : 'bar-item'">
                    <span @click="moveCamera(); headerIndex = 0">风机启动</span>
                </div>
                <div :class="headerIndex === 1 ? 'bar-item-active bar-item' : 'bar-item'">
                    <span @click="patrolInspection(); headerIndex = 1;">模拟巡检</span>
                </div>
                <div :class="headerIndex === 2 ? 'bar-item-active bar-item' : 'bar-item'">
                    <span @click="indoorOperation(); headerIndex = 2;">室内操作</span>
                </div>
            </div>

            <div class="left_box">
                <div class="content">
                    <a-row>

                        <a-col :span="18">
                            <bar title="销售额排行" :dataSource="barData" :height="250" />
                            <a-col :span="24" class="echartsTitle1">销售额排行</a-col>
                        </a-col>
                        <a-col :span="18">
                            <area-chart-ty :dataSource="areaData" x="月份" y="销售额" :height="250" />
                            <a-col :span="24" class="echartsTitle">销售额排行</a-col>
                        </a-col>

                    </a-row>
                </div>
            </div>
            <div class="right_box">
                <div class="content">
                    <a-row>
                        <a-col :span="18" :offset="4" style="margin-top: 85px;">
                            <line-chart-multid title="多行折线图" :fields="visitFields" :dataSource="multidList" />
                            <a-col :span="24" class="echartsTitle">销售额排行</a-col>
                        </a-col>
                        <a-col :span="18" :offset="4" style="margin-top: 10px;">
                            <pie title="饼图" />
                            <a-col :span="24" class="echartsTitle">销售额排行</a-col>
                        </a-col>
                    </a-row>
                </div>
            </div>

            <!-- <p>
            云渲染主机IP地址：<input v-model="elemIPValue" />
            端口：<input v-model="elemPortValue" />
            <button @click="render()">渲染视频流</button>
            </p> -->

            <!-- <button id="reset" @click="reset();">重置场景</button> -->
            <!-- <button id="infoTree" @click="infoTree();">查询图层树</button> -->

            <!-- <button id="reset" @click="samples_eventListener1();">工程初始化</button>
            <button id="infoTree" @click="cameraGet();">获取镜头位置</button>
            <button @click="setCamera()">设置位置到房子</button>
            <button id="hideUI" @click="hideUI();">显示|隐藏UI</button>
            <button id="addCo" @click="eventListen();">设置事件监听</button>
            <br /> -->
            <!-- <button id="hideCompass" @click="hideCompass();">显示|隐藏指北针</button> -->
            <!-- <button id="addCo" @click="cameraMoveBackward();">飞行</button>
             <button id="addCo" @click="cameraStop();">停止飞行</button> -->

            <!--
            <button id="addMarker0" @click="addMarker();">添加标签</button>
            <button id="addMarker1" @click="addMarkerWindow();">添加弹窗标签</button>
            <button id="addMarker2" @click="addMarkerWindow2();">视频弹窗</button>
            <button id="addMarker3" @click="clearMarker();">删除标签</button>

            <br/>
            <button id="addCo" @click="addCo();">添加模型</button>
            <button id="addCo" @click="clearCo();">删除模型</button>
            

            <br/> 
            
            <button id="samples_initModel" @click="samples_initModel();">初始化</button>
            <button id="samples_highlightActor" @click="samples_highlightActor();">切换模型高亮</button>
            <button id="samples_showHideActor" @click="samples_showHideActor();">显示/隐藏模型</button>
            <button id="samples_replaceActor" @click="samples_replaceActor();">替换/还原模型</button>
            <button id="samples_moveActor" @click="samples_moveActor();">旋转移动/还原模型</button>
            <button id="samples_scaleActor" @click="samples_scaleActor();">缩放/还原模型</button>
            <button id="samples_copyActors" @click="samples_copyActors();">复制多个模型</button>
            <button id="samples_setColorActor" @click="samples_setColorActor();">设置/还原模型颜色</button>
            <button id="samples_callBluePointFunction" @click="samples_callBluePointFunction();">蓝图函数</button>
            <br/>
            -->
            <!-- <button id="samples_floorInit" @click="samples_floorInit();">初始化</button>
            <button id="samples_floorMoveUp" @click="samples_floorMoveUp();">升起楼层</button>
            <button id="samples_floorMovePull" @click="samples_floorMovePull();">抽出楼层</button>
            <button id="samples_floorMovePush" @click="samples_floorMovePush();">推入楼层</button>
            <button id="samples_floorMoveDown" @click="samples_floorMoveDown();">下降楼层</button>
            <button id="samples_floorReset" @click="samples_floorReset();">还原楼层</button>
            <br />

            <button id="samples_initWalkManAndCar" @click="samples_initWalkManAndCar();">初始化</button>
            
            <button id="samples_walkman" @click="samples_walkman();">模拟人物步行</button>
            <br /> -->
            <!-- <button id="samples_vehicleStart" @click="samples_vehicleStart();">交通仿真</button> -->
            <!-- <button id="samples_runman" @click="samples_runman();">模拟人物跑步</button> -->

            <Dialog v-if="dialogStoreName === '普通风力发电机'" title="风速模拟" @close="closeDialog" :width="400" :height="252"
                :XY="[1000, 200]">


                <div class="row">
                    <div class="item">
                        <div class="label">所属线路</div>
                        <div class="value">线路一</div>
                    </div>
                </div>
                <div class="row">
                    <div class="item">
                        <div class="label">风机状态</div>
                        <div class="value">正常运行</div>
                    </div>
                    <div class="item">
                        <div class="label">风速</div>
                        <div class="value">{{ windSpeed }}m/s</div>
                    </div>
                </div>
                <div class="row">
                    <div class="item">
                        <div class="label">日发电量</div>
                        <div class="value" v-if="windSpeed > 0">{{ (13.2 * windSpeed - 0.5).toFixed(2) }}kwh</div>
                        <div class="value" v-else>{{ 0 }}kwh</div>
                    </div>
                    <div class="item">
                        <div class="label">风向</div>
                        <div class="value">偏北</div>
                    </div>
                </div>

                <a-row style="margin-top: 10px;">
                    <a-col :span="5">
                        <div class="label">风速模拟</div>
                    </a-col>
                    <a-col :span="17">
                        <a-slider id="test" v-model="windSpeed" :tooltip-visible="false" :max="15"
                            @change="BPFunction_xuan_zhuan" />
                    </a-col>

                </a-row>


                <button id="moveCamera" @click="moveCamera();" :class="windSpeed > 0 ? 'addBtn' : 'footerBtn'">风机启动</button>
                <button @click="closeFooter" :class="windSpeed == 0 ? 'addBtn' : 'footerBtn'">风机停止</button>
                <button @click="failureToSee" :class="!isShowShell ? 'addBtn' : 'footerBtn'">风机故障查看</button>
                <button @click="dismantling" :class="isChaiJie ? 'addBtn' : 'footerBtn'">风机拆解</button>
            </Dialog>

            <Dialog v-if="dialogStoreName === '巡检路线'" title="巡检路线" @close="closeDialog" :width="400" :height="252"
                :XY="[1000, 200]">

                <button class="footerBtn" @click="samples_walkman(1);">人物巡检</button>
                <button class="footerBtn" @click="samples_walkman(2);">跟随视觉巡检</button>
                <button class="footerBtn" @click="samples_walkman(3);">没有中间坐标</button>
                <!-- <button class="footerBtn" @click="samples_walkman(4);">中间不插值</button> -->

                <!-- <button @click="closeFooter" :class="windSpeed == 0 ? 'addBtn' : 'footerBtn'">风机停止</button>
                <button @click="failureToSee" :class="!isShowShell ? 'addBtn' : 'footerBtn'">风机故障查看</button>
                <button @click="dismantling" :class="isChaiJie ? 'addBtn' : 'footerBtn'">风机拆解</button> -->
            </Dialog>
            <Dialog v-if="dialogStoreName === '发电站'" :title="dialogStore.content.name" @close="closeDialog" :width="400"
                :height="362" :XY="[1000, 200]">
                <div class="out-content">
                    <!-- {{ window.origin + "/dialog/" + dialogStore.content.name }} -->
                    <img :src="'/dialog/' + dialogStore.content.name + '.jpg'" alt="" />
                    <template v-if="dialogStore.content.name === '风力发电站'">
                        <p>中文名：风力发电</p>
                        <p>全球风能：2.74×10^9MW</p>
                        <p>来源：风</p>

                        <p>可利用风能：2×10^7MW</p>
                        <p>能源类型：可再生能源</p>

                        <p>最初用途：通过风车来抽水、磨面等</p>
                    </template>
                    <template v-else-if="dialogStore.content.name === '火力发电站'">
                        <p>中文名：火力发电</p>
                        <p>类别：非生物</p>
                        <p>外文名：thermoelectricity power</p>

                        <p>环境影响：大气污染</p>
                        <p>能源类型：不可再生能源</p>

                        <p>利用：可燃物;多为煤炭</p>
                    </template>
                    <template v-else-if="dialogStore.content.name === '水力发电站'">
                        <p>中文名：水力发电</p>
                        <p>方式：水电站</p>
                        <p>外文名：Hydroelectric power</p>

                        <p>原料：河流、湖泊</p>
                        <p>原理：将水能转换为电能</p>

                        <p>分类：堤坝式水电厂，引水式水电厂</p>
                    </template>
                    <template v-else-if="dialogStore.content.name === '核能发电站'">
                        <p>中文名：核力发电</p>
                        <p>原则：质量第一，安全第一</p>
                        <p>外文名：nuclear power plant</p>
                        <p>发电原理：核反应堆</p>

                        <p>基本设备：主泵等</p>
                        <p>类别：不可再生能源</p>
                    </template>
                    <template v-else-if="dialogStore.content.name === '太阳能发电站'">
                        <p>中文名：太阳能发电站</p>
                        <p>应用地区：甘肃、山东、江苏</p>
                        <p>外文名：Solar power station</p>
                        <p>代表：法国奥德约太阳能发电站</p>
                        <p>组件：太阳能电池组件、控制器</p>
                        <p>类别：可再生能源</p>
                    </template>
                </div>
            </Dialog>
            <Dialog v-if="dialogStoreName === '风机'" :title="dialogStore.content.name" @close="closeDialog" :width="400"
                :height="172" :XY="[1000, 200]">
                <div class="out-content">
                    <p>中文名：风力发电</p>
                    <p>全球风能：2.74×10^9MW</p>
                    <p>来源：风</p>

                    <p>可利用风能：2×10^7MW</p>
                    <p>能源类型：可再生能源</p>

                    <p>最初用途：通过风车来抽水</p>
                </div>
            </Dialog>
        </div>
    </a-card>
</template>

<script>
import Dialog from './modules/Dialog'
import Bar from '@/components/chart/Bar'
import AreaChartTy from '@/components/chart/AreaChartTy'
import Pie from '@/components/chart/Pie'

import RankList from '@/components/chart/RankList'
import LineChartMultid from '@/components/chart/LineChartMultid'
const barData = []
for (let i = 0; i < 12; i += 1) {
    barData.push({
        x: `${i + 1}月`,
        y: Math.floor(Math.random() * 1000) + 200
    })
}
export default {
    name: 'threeProofingsData',
    components: {
        Dialog,
        Bar,
        AreaChartTy,
        Pie,
        RankList,
        LineChartMultid
    },
    data() {

        return {
            dialogStore: {
                content: {
                    name: ''
                }
            },
            build: [],
            buildPoint: {
                风力: [
                    [488308.525, 2493029.92, 0],
                ],
                水力: [
                    [488310.12375, 2493041.2800000003, 0],
                ],
                火力: [
                    [488331.705, 2493035.04, 0],
                ],
                太阳能: [
                    [488330.715, 2493027.52, 4.172670593261719],
                ],
                核能: [
                    [488328.25125000003, 2493019.36, 3.1329998779296875],
                ],
            },
            headerIndex: null,
            visitFields: ['jeecg', 'jeebt'],
            multidList: [
                { type: 'Jan', jeecg: 7.0, jeebt: 3.9 },
                { type: 'Feb', jeecg: 6.9, jeebt: 4.2 },
                { type: 'Mar', jeecg: 9.5, jeebt: 5.7 },
                { type: 'Apr', jeecg: 14.5, jeebt: 8.5 },
                { type: 'May', jeecg: 18.4, jeebt: 11.9 },
                { type: 'Jun', jeecg: 21.5, jeebt: 15.2 },
                { type: 'Jul', jeecg: 25.2, jeebt: 17.0 },
                { type: 'Aug', jeecg: 26.5, jeebt: 16.6 },
                { type: 'Sep', jeecg: 23.3, jeebt: 14.2 },
                { type: 'Oct', jeecg: 18.3, jeebt: 10.3 },
                { type: 'Nov', jeecg: 13.9, jeebt: 6.6 },
                { type: 'Dec', jeecg: 9.6, jeebt: 4.8 }
            ],
            rankList: [],
            areaData: [],
            barData,
            windSpeed: 0,
            dialogStoreName: null,
            cloudAPI: null,
            elemIPValue: "127.0.0.1",
            elemPortValue: "8080",
            //api初始化完成的全局标识
            apiOnReady: false,
            isRoad3DTCreate: false,

            // 构造player对象
            demoPlayer: null,
            //构造AirCityAPI对象并初始化
            airCityApi: null,

            //显示隐藏UI
            __uiVisible: false,
            //显示隐藏指北针
            __cpVisible: false,
            // 点击切换物体高亮
            highLightflag: false,
            //模型显示隐藏状态
            showActorflag: false,
            // 选中区域
            __tileLayerCurSel: null,
            //记录替换状态
            replaceState: false,
            //记录移动旋转状态
            moveState: false,
            //记录缩放状态
            scaleState: false,
            //记录颜色状态
            actorColorState: false,
            //记录初始化状态
            readyState: false,
            dismantleBuildingObj: null,
            customObjectDataArr: null,
            customObjectIdArr: null,
            isShowShell: true,
            isChaiJie: false,

            floorInfoArr: [],

            //构造AirCityPlayer对象所需的参数选项，更多参数详情请参考API开发手册里AirCityPlayer对象
            options: {},
        }
    },
    created() {
        this._onReady()
        // window.addEventListener('keydown', this.handleKeyPress);
        this.loadAreaData()
        // this.loadRankListData()
        setTimeout(() => {
            console.log(1)
            this.samples_eventListener1()
        }, 500)
    },
    methods: {
        // handleKeyPress(event) {
        //     if (event.key === 'w') {
        //         this.functionW();
        //     } else if (event.key === 'a') {
        //         this.functionA();
        //     } else if (event.key === 's') {
        //         this.functionS();
        //     } else if (event.key === 'd') {
        //         this.functionD();
        //     }
        // },
        // functionW() {
        //     // 处理按下W键的逻辑
        //     console.log('w')
        //     __g.camera.moveForward();

        // },
        // functionA() {
        //     // 处理按下A键的逻辑
        //     console.log('a')
        // },
        // functionS() {
        //     // 处理按下S键的逻辑
        //     console.log('s')
        //     __g.camera.moveBackward();
        // },
        // functionD() {
        //     // 处理按下D键的逻辑
        //     console.log('d')
        // },
        //高级-初始化
        samples_eventListener1() {
            //初始化场景前先销毁已存在的渲染场景
            if (this.cloudAPI) {
                this.cloudAPI.destroy();
            }
            //云渲染主机地址和端口
            var host = this.elemIPValue + ':' + this.elemPortValue

            //注意：可以把此变量声明为全局变量，在点击事件的回调函数内部赋值当前选中区域
            //var currentTileLayerSelection;

            //onEvent场景交互事件回调函数
            let _onEvent = (event) => {
                //事件类型 参考交互事件类型枚举对象
                var eventType = event.eventtype;
                //图层类型
                var layerType = event.Type;
                //图层id
                var layerId = event.Id || event.ID;
                //点击ActorId
                var objectId = event.ObjectID;
                //点击位置
                var objectLocation = event.MouseClickPoint;

                //监听marker点击事件
                if (event.eventtype == 'LeftMouseButtonClick') {
                    console.log('666', event)
                    $("#popDiv").hide();

                    if (event.Type == 'marker') {
                        if (event.GroupID === "发电站") {
                            this.dialogStoreName = '发电站'
                            console.log('弹框', this.dialogStoreName)
                            this.dialogStore.content = JSON.parse(event.UserData)
                        }
                        if (event.Id === "video_marker") {
                            __g.marker.delete("video_marker")
                        }
                    }
                    if (event.Type == 'CustomObj') {
                        if (event.GroupID === "风机") {
                            this.dialogStoreName = '风机'
                            this.dialogStore.content = JSON.parse(event.UserData)
                        }
                    }
                    if (event.Type == 'marker') {
                        if (event.GroupID === "风机") {
                            this.dialogStoreName = '风机'
                            this.dialogStore.content = JSON.parse(event.UserData)
                        }
                    }
                    if (event.Type == 'TileLayer') {
                        if (event.Id === "48D90B864AB7665987C81EB90BF8B1B3") {
                            var markerLocation = [488327.125, 2493028, 1.6867464780807495];
                            //构造带弹层的标注
                            let o = {
                                id: 'video_marker',
                                coordinate: markerLocation,//坐标位置
                                coordinateType: 0,//默认0是投影坐标系，也可以设置为经纬度空间坐标系值为1
                                anchors: [0, 0],//锚点  控制标注整体的偏移
                                range: [1, 10000],//可视范围
                                // imagePath: HostConfig.Path + '/samples/images/marker/marker_bg.png',//显示图片路径
                                // hoverImagePath: HostConfig.Path + '/samples/images/marker/marker_bg_hover.png',// 鼠标悬停时显示的图片路径
                                imageSize: [48, 55],//图片的尺寸
                                fixedSize: true,//图片固定尺寸，取值范围：false 自适应，近大远小，true 固定尺寸，默认值：false 

                                // text: '视频弹窗标注',//显示的文字
                                useTextAnimation: false,//打开文字展开动画效果
                                textRange: [1, 10000],//文本可视范围[近裁距离, 远裁距离]
                                textOffset: [0, 0],// 文本偏移
                                textBackgroundColor: [1, 1, 1, 1],//文本背景颜色
                                fontSize: 20,//字体大小
                                fontOutlineSize: 1,//字体轮廓线大小
                                //RGB(70,248,143)
                                fontColor: [0.2274509803921569, 0.8156862745098039, 0.5607843137254902, 1],//字体颜色
                                fontOutlineColor: Color.Black,//字体轮廓线颜色
                                showLine: false,//标注点下方是否显示垂直牵引线

                                popupURL: HostConfig.Path + '/media/video/video1.mp4',//视频文件路径，也支持rtsp实时视频流格式
                                popupBackgroundColor: [1.0, 1.0, 1.0, 0.6],//弹窗背景颜色
                                popupSize: [100, 80],//弹窗大小
                                popupOffset: [-60, -50],//弹窗偏移

                                autoHidePopupWindow: false,//失去焦点后是否自动关闭弹出窗口
                                autoHeight: false,// 自动判断下方是否有物体
                                displayMode: 2,//显示模式 
                                priority: 0,//避让优先级
                                occlusionCull: false//是否参与遮挡剔除
                            };
                            __g.marker.add(o);
                            __g.marker.showPopupWindow(o.id);
                            // __g.marker.focus('video_marker', 100, 1);
                        }
                    }



                    // eventtype: 'LeftMouseButtonClick', Type: 'CustomObj', Id: 'walkman_fan0', OID: '风车_C_0', GroupID: '风机', …}
                    if (event.Id == 'div_marker' && event.Type == 'marker') {
                        console.log('marker')
                        //把投影坐标转换为屏幕坐标并设置弹层div的相对定位
                        this.cloudAPI.coord.world2Screen(492576.125, 2492218.75, 6.2899975776672363).then(result => {
                            var screenPosition = result.screenPosition;
                            $("#popDiv").css("position", "relative");
                            $("#popDiv").css("left", screenPosition[0] + 100);
                            $("#popDiv").css("top", screenPosition[1] + 1000);
                            $("#popDiv").show();
                        });
                    }
                }

                /**
                 * 
                 * 事件监听类型描述：
                 * 
                 * 1.左键单击：LeftMouseButtonClick
                 *
                 * 注意：移动和悬停需要开启设置鼠标拾取后才生效
                 * 开启鼠标拾取：__g.settings.setMousePickMask(7);
                 * 2.鼠标移动：MouseMoved    
                 * 3.鼠标悬停：MouseHovered
                 *
                 *
                 * 注意：需要开启相机移动监听事件  
                 * 开启相机移动事件监听：__g.settings.setEnableCameraMovingEvent(true);
                 * 
                 * 4.相机开始飞行：CameraStartMove
                 * 5.相机正在飞行：CameraMoving
                 * 6.相机停止飞行：CameraStopMove
                 * 
                 *
                 * 相机执行set/lookAt/lookAtBBox方法时触发
                 * 7.相机位置变化：CameraChanged
                 *
                 * 注意：进入测量模式后，开始测量时触发
                 * 8.开始测量：Measurement
                 * 
                 * 注意：相机播放导览结束__g.camera.playAnimation(id)和导览对象播放导览结束__g.cameraTour.play(id)均触发此事件
                 * 9.播放导览结束：CameraTourFinished
                 * 
                 **/
                switch (eventType) {
                    case "LeftMouseButtonClick":
                        console.log('触发事件类型：鼠标左键单击，eventType：' + eventType);
                        //如果是三维图层 则输出点击区域信息
                        if (layerType == "TileLayer") {
                            console.log('======点击事件开始======');
                            console.log('图层ID: ' + layerId);
                            console.log('图层类型: ' + layerType);
                            console.log('图层内物体ID: ' + objectId);
                            console.log('图层内物体位置: [' + objectLocation + ']');
                            console.log('======点击事件结束======');
                            //构造当前选中区域
                            this.__tileLayerCurSel = {
                                'id': layerId,
                                'objectId': objectId,
                                'location': objectLocation
                            };
                        }
                        break;

                    case "MouseHovered":
                        console.log('触发事件类型：鼠标悬停，eventType：' + eventType);
                        break;

                    case "MouseMoved":
                        console.log('触发事件类型：鼠标移动，eventType：' + eventType);
                        break;

                    case "CameraStartMove":
                        console.log('触发事件类型：相机开始飞行，eventType：' + eventType);
                        break;

                    case "CameraMoving":
                        console.log('触发事件类型：相机正在飞行，eventType：' + eventType);
                        break;

                    case "CameraStopMove":
                        console.log('触发事件类型：相机停止飞行，eventType：' + eventType);
                        break;

                    case "CameraChanged":
                        console.log('触发事件类型：相机位置发生变化，eventType：' + eventType);
                        break;

                    case "Measurement":
                        console.log('触发事件类型：开始测量，eventType：' + eventType);
                        break;

                    default: ""
                }
            };

            //onReady回调函数 二次开发时必选
            let _onReady = () => {
                //开始调用DigitalTwinAPI接口进行二次开发
                // logWithColor("green", "初始化成功，请开始使用DigitalTwinAPI接口进行二次开发。");
                //设置相机位置

                this.cloudAPI.camera.set(488012.736035, 2492997.908984, 102.735781, -16.597954, 12.839793, 0);
                //隐藏右侧导航栏
                this.cloudAPI.settings.setMainUIVisibility(false);

                //开启事件监听
                this.cloudAPI.settings.setEnableCameraMovingEvent(true);
                this.cloudAPI.settings.setMousePickMask(7);
            };

            //onLog回调函数 二次开发时可选
            // let _onLog = (msg, noLineBreak) => {
            //     if (msg.indexOf('Reconnecting...') != -1) {
            //         clearScreen();
            //         msg += (++iReconnect);
            //     }
            //     if (msg.indexOf('Connected!') != -1) {
            //         iReconnect = 0;
            //     }
            //     var e = document.getElementById('infoPanel');
            //     e.insertAdjacentHTML('beforeend', msg + (noLineBreak ? '' : '\n'));
            //     e.scrollTop = e.scrollHeight + 100;
            // };

            //onloaded回调函数 二次开发时可选
            let _onLoaded = (event) => {
                console.log('视频流加载成功!');
                //批量插入风机
                setTimeout(() => {
                    this.switchStaticFan()
                }, 1500)
            };

            //onClose回调函数 二次开发时可选
            let _onClose = (event) => {
                console.log('视频流已断开!')
            };

            //开发前请参考API开发手册里DigitalTwinPlayer对象的构造参数
            //视频流初始化配置
            let options = {
                //必选参数，网页显示视频流的dom节点id
                'domId': 'player',

                //必选参数，二次开发时必须指定，否则无法进行二次开发
                'apiOptions': {
                    //必选参数，与云渲染主机通信成功后的回调函数
                    //注意：只有在onReady之后才可以调用DigitalTwinAPI接口
                    'onReady': _onReady,

                    //可选参数，日志输出回调函数
                    // 'onLog': _onLog,
                    //可选参数，三维场景交互事件回调函数
                    'onEvent': _onEvent
                },

                //可选参数，是否显示页面按钮【+显示信息】，默认false
                'showStatus': true,
                //可选参数，是否显示页面加载详细信息，默认值为true
                'showStartupInfo': true,
                //可选参数，视频流加载成功回调函数
                'onloaded': _onLoaded,
                //可选参数，连接断开回调函数
                'onclose': _onClose,
                //可选参数，设置三维交互的键盘事件接收者
                //注意：接收类型有视频标签(video)，网页文档(document)，空(none)
                'keyEventTarget': 'video',
            };
            //构造DigitalTwinPlayer对象
            let demoPlayer = new DigitalTwinPlayer(host, options);
            //构造DigitalTwinAPI对象并初始化
            this.cloudAPI = demoPlayer.getAPI();



        },
        //特别注意：这里是所有API接口调用的入口
        _onReady() {
            this.apiOnReady = true;
            //TODO 注意：在_onReady完成后才可以调用api接口
        },

        //风速模拟
        moveCamera() {
            __g.marker.delete("video_marker")
            if (this.apiOnReady) {
                //x, y, z, pitch, yaw, flyTime
                //   控制相机移动到风机
                this.cloudAPI.camera.set(488165.194141, 2492875.745, 42.731055, -4.799041, 8.922171, 0);
                this.dialogStoreName = '普通风力发电机'
                this.BPFunction_xuan_zhuan(1)
                this.windSpeed = 1
            }
        },
        // 停止风机
        closeFooter() {
            console.log('关闭')
            // this.dialogStoreName = null
            this.windSpeed = 0
            this.BPFunction_xuan_zhuan(0)
        },

        // 故障查看
        failureToSee() {
            // this.isChaiJie = false
            // this.BPFunction_chai_jie(this.isChaiJie)
            // this.BPFunction_xuan_zhuan(0)
            this.isShowShell = !this.isShowShell
            //   控制相机移动到风机
            this.cloudAPI.camera.set(488250.777061, 2492855.64478, 45.137974, -22.117552, -43.345078, 0);
            if (this.isShowShell) {
                __g.tileLayer.hide('48388F5E4340C6FA4027E7A316A9F22B')
            } else {
                __g.tileLayer.show('48388F5E4340C6FA4027E7A316A9F22B')
            }
            // 
            this.BPFunction_po_jie(this.isShowShell)
        },

        // 风机拆解
        dismantling() {
            // this.isShowShell = true
            // this.BPFunction_po_jie(this.isShowShell)
            // this.BPFunction_xuan_zhuan(0)


            this.isChaiJie = !this.isChaiJie
            //   控制相机移动到风机
            this.cloudAPI.camera.set(488243.980557, 2492849.601387, 50.991636, -22.117552, -43.345078, 0);
            this.BPFunction_chai_jie(this.isChaiJie)
        },
        // 公共方法 风机旋转
        BPFunction_xuan_zhuan(val) {
            const f = new BPFunctionData();
            f.objectName = "bp_fy_5";
            f.functionName = "SETYP";
            f.paramType = 3;
            f.paramValue = val
            __g.misc.callBPFunction(f);
        },
        //  公共方法 故障查看
        BPFunction_po_jie(bool) {
            console.log(bool, 'bool')
            const f = new BPFunctionData();
            f.objectName = "bp_FDJ_2";
            f.functionName = "SetOP";
            f.paramType = 5;
            f.paramValue = bool ? "显" : "隐";
            __g.misc.callBPFunction(f);
        },
        // 公共方法 风机拆解
        BPFunction_chai_jie(bool) {
            const f = new BPFunctionData();
            f.objectName = "bp_FDJ_2";
            f.functionName = "SetCJ";
            f.paramType = 5;
            f.paramValue = bool ? "开" : "合";
            __g.misc.callBPFunction(f);
        },
        // 关闭弹窗
        closeDialog() {
            this.dialogStoreName = null
            this.windSpeed = 0
            this.BPFunction_xuan_zhuan(0)
        },
        // 打开巡检弹框
        patrolInspection() {
            __g.marker.delete("video_marker")
            this.dialogStoreName = '巡检路线'
            __g.camera.set(488282.812031, 2492989.885625, 15.770632, -20.115965, -41.491302, 0.000001);
            this.samples_initWalkManAndCar();
        },
        // 人物初始化
        async samples_initWalkManAndCar() {
            /**
             * 使用注意：
             * 1、操作前请先在场景中选中模型
             * 2、注意操作提示语和左下角的日志控制台信息
             * 
             **/

            //添加前清空所有customObject 防止id重复
            __g.customObject.clear();
            //投影坐标
            let co_location = [493132.125, 2492028.25, 2.1155664920806885];
            let o = {
                id: 'o1',//自定义对象唯一id
                pakFilePath: '@path:DTS_Library.pak',//pak文件路径,推荐使用cloud内置的文件资源管理器并使用@path方式传入参数
                assetPath: '/Game/Common/Asset_Bank/Mesh/Car/BP_Car_JiuHuChe',//资源目录，自定义对象在pak文件资源包里的相对路径
                location: co_location,//位置坐标
                coordinateType: 0,// 坐标系类型 
                rotation: [0, 0, 0],//模型旋转
                scale: [1, 1, 1],//模型缩放
                smoothMotion: 1,   //1: 平滑插值，0: 跳跃
            };
            await __g.customObject.add(o);
            __g.customObject.focus(o.id);

            this.isRoad3DTCreate = true;

            // let o2 = {}
            // o2.id = 'm2';
            // o2.coordinate = [488328.25125000003, 2493019.36, 3.1329998779296875];
            // o2.text = 'Building No.2';
            // o2.pointName = 'Point_B_7';
            // await __g.marker3d.add(o2);
            // this.samples_walkman()



            __g.marker3d.clear();
            let o2 = {
                'id': 'm1',
                'groupId': 'marker3dTest',
                'text': '',//3D标注显示文字
                'textSize': 32,//3D标注显示文字大小
                'textColor': '#6BF4F7',//3D标注显示文字颜色
                'textOutlineSize': 1,//3D标注显示文字轮廓大小
                'textOutlineColor': Color.Black,// 3D标注显示文字轮廓颜色
                'textFixed': true,// 3D标注显示文字是否固定文本朝向
                'textVisible': true,//3D标注显示文字是否显示文本
                'textLocation': [0, 0, 0],// 文字位置
                'textRotation': [0, 90, 0],// 文字旋转
                'textScale': [10, 10, 10],// 文字缩放
                'pointName': 'Point_B_5',//3D标注展示的特效名称
                'pointVisible': true,//3D标注是否显示
                'pointScale': 0.3,//3D标注整体缩放比例
                'coordinate': [488328.25125000003, 2493019.36, 3.1329998779296875], //3D标注的坐标位置 注意：若坐标Z设置高度为0时 autoHeight=true则会显示在物体上方
                'coordinateType': 0, //坐标系类型 
                'range': [1, 10000], //3D标注的可视距离范围：[min,max]，单位：米
                'autoHeight': false//自动判断下方是否有物体，设置正确高度，默认值：false
            }
            await __g.marker3d.add(o2);
            let o3 = {
                'id': 'm2',
                'groupId': 'marker3dTest',
                'text': '',//3D标注显示文字
                'textSize': 32,//3D标注显示文字大小
                'textColor': '#6BF4F7',//3D标注显示文字颜色
                'textOutlineSize': 1,//3D标注显示文字轮廓大小
                'textOutlineColor': Color.Black,// 3D标注显示文字轮廓颜色
                'textFixed': true,// 3D标注显示文字是否固定文本朝向
                'textVisible': true,//3D标注显示文字是否显示文本
                'textLocation': [0, 0, 0],// 文字位置
                'textRotation': [0, 90, 0],// 文字旋转
                'textScale': [10, 10, 10],// 文字缩放
                'pointName': 'Point_B_5',//3D标注展示的特效名称
                'pointVisible': true,//3D标注是否显示
                'pointScale': 0.3,//3D标注整体缩放比例
                'coordinate': [488310.12375, 2493041.2800000003, 0], //3D标注的坐标位置 注意：若坐标Z设置高度为0时 autoHeight=true则会显示在物体上方
                'coordinateType': 0, //坐标系类型 
                'range': [1, 10000], //3D标注的可视距离范围：[min,max]，单位：米
                'autoHeight': false//自动判断下方是否有物体，设置正确高度，默认值：false
            }
            await __g.marker3d.add(o3);


        },
        // 模拟人物步行
        samples_walkman(status) {
            /**
              * 以下示例代码为模拟人物跑步
              * 
              * 实现原理：
              * 1、人物pak模型内置静止和步行两种类型，先添加静止人物并设置一秒后开始按路径移动
              * 2、开始移动前更换为步行人物模型
              * 3、运动结束后更换为静止人物模型
              * 
              **/
            //是否已经创建示例所需3dt
            if (this.isRoad3DTCreate) {
                // 
                //静止人物模型材质路径 UE工程内Actor文件路径
                var static_man_file_path = "/JC_CustomAssets/RoleLibrary/Exhibition/动态人物/女角色_1";

                //添加前清空所有customObject 防止id重复
                __g.customObject.clear();
                //投影坐标
                var man_location = [488311.48, 2493036.80, 0.60];
                let walkmanCustomObj = {
                    id: 'walkman_static',//自定义对象唯一id
                    pakFilePath: '@path:DTS_Library_V5.4_05.23.pak',//pak文件路径
                    assetPath: static_man_file_path,//静止人物模型路径
                    location: man_location,//位置坐标
                    coordinateType: 0,// 坐标系类型 
                    rotation: [0, 0, 0],//旋转
                    scale: [1, 1, 1],//缩放
                    smoothMotion: 1,   //1: 平滑插值，0: 跳跃
                };
                __g.customObject.add(walkmanCustomObj);

                //移动相机至人物运动视角
                __g.camera.set(488282.812031, 2492989.885625, 15.770632, -20.115965, -41.491302, 0.000001);
                //   __g.camera.set(488344.860156,2492992.819375,7.959251,-17.358051,-150.798431,0);

                //人物一秒后开始移动
                if (status == 2) {
                    window.setTimeout(this.start_walkman_walk2(status), 1000);
                } else {
                    window.setTimeout(this.start_walkman_walk(status), 1000);
                }

            } else {
                this.$message.error('三维图层未创建，请到图层操作导航下创建示例所需的三维图层！');
            }
        },
        //控制人物运动
        start_walkman_walk(status) {
            //运动人物模型材质路径 UE工程内Actor文件路径

            //步行人物模型路径
            var walk_man_file_path = "/JC_CustomAssets/BP_Walk";

            //人物运动路径

            var walk_man_path_arr = [];
            if (status == 3) {
                walk_man_path_arr = [
                    [488304.23125, 2493019.68, 0],
                    [488328.25125000003, 2493019.36, 3.1329998779296875],
                ];
            } else {
                walk_man_path_arr = [
                    [488304.23125, 2493019.68, 0],
                    [488308.525, 2493029.92, 0],
                    [488310.12375, 2493041.2800000003, 0],
                    [488318.9525, 2493038.72, 0],
                    [488331.705, 2493035.04, 0],
                    [488330.715, 2493027.52, 4.172670593261719],
                    [488328.25125000003, 2493019.36, 3.1329998779296875],
                ];
            }
            //添加前清空所有customObject 防止id重复
            __g.customObject.clear();
            //人物运动的开始坐标
            var man_location = [488304.23125, 2493019.68, 0];
            console.log(HostConfig.Path, 'HostConfig.Path')
            let walkmanCustomObj = {
                id: 'walkman_walk',//自定义对象唯一id
                pakFilePath: HostConfig.Path + '/media/pak/walkman.pak',//pak文件路径
                assetPath: walk_man_file_path,//运动人物模型路径
                location: man_location,//位置坐标
                coordinateType: 0,// 坐标系类型 
                rotation: [0, 0, 0],//旋转
                scale: [1, 1, 1],//缩放
                smoothMotion: 1,   //1: 平滑插值，0: 跳跃
            };
            __g.customObject.add(walkmanCustomObj);

            //控制人物移动
            let walkManPointArr = [];
            let walkTime = 0;
            for (let i = 0; i < walk_man_path_arr.length; i++) {
                //构造路径参数数组 每1000毫秒移动一次
                let elementPoint = { 'time': (i) * 4, 'coordinate': walk_man_path_arr[i] };
                // if (i + 1 == walk_man_path_arr.length) {
                //     elementPoint = { 'time': (i) * 4, 'coordinate': walk_man_path_arr[i], "rotation": [0, 90, 0] };
                // }
                walkManPointArr.push(elementPoint);
            }
            walkTime = walkManPointArr[walkManPointArr.length - 1].time;

            // 人物高亮
            __g.customObject.highlight('walkman_walk');
            //人物按轨迹移动
            __g.customObject.startMove('walkman_walk', 0, walkManPointArr);
            //设置跟随相机

            //运动结束后切换为静止人物
            let timeOut = walkTime * 1000 + 1500;
            // let location = [493139.25, 2492023, 2.3132898807525635];
            setTimeout(() => {
                this.switchStaticMan(1)
            }, timeOut)
        },
        //控制人物运动 跟随视角
        start_walkman_walk2(status) {
            //运动人物模型材质路径 UE工程内Actor文件路径

            //步行人物模型路径
            var walk_man_file_path = "/JC_CustomAssets/BP_Walk";

            //人物运动路径
            var walk_man_path_arr = [
                // [488310.61, 2493036.90, 0.59],
                // [488329.40, 2493036.12, 0.00],
                // [488332.07, 2493032.94, 0.97],
                // [488331.86, 2493031.04, 1.91],
                // [488329.72, 2493028.42, 3.60],
                // [488327.01, 2493020.94, 3.13],

                [488304.23125, 2493019.68, 0],
                [488308.525, 2493029.92, 0],
                [488310.12375, 2493041.2800000003, 0],
                [488318.9525, 2493038.72, 0],
                [488331.705, 2493035.04, 0],
                [488330.715, 2493027.52, 4.172670593261719],
                [488328.25125000003, 2493019.36, 3.1329998779296875],

            ];
            //添加前清空所有customObject 防止id重复
            __g.customObject.clear();
            //人物运动的开始坐标
            var man_location = [488304.23125, 2493019.68, 0];
            console.log(HostConfig.Path, 'HostConfig.Path')
            let walkmanCustomObj = {
                id: 'walkman_walk',//自定义对象唯一id
                pakFilePath: HostConfig.Path + '/media/pak/walkman.pak',//pak文件路径
                assetPath: walk_man_file_path,//运动人物模型路径
                location: man_location,//位置坐标
                coordinateType: 0,// 坐标系类型 
                rotation: [0, 0, 0],//旋转
                scale: [1, 1, 1],//缩放
                smoothMotion: 1,   //1: 平滑插值，0: 跳跃
            };
            __g.customObject.add(walkmanCustomObj);

            //控制人物移动
            let walkManPointArr = [];
            let walkTime = 0;
            for (let i = 0; i < walk_man_path_arr.length; i++) {
                //构造路径参数数组 每1000毫秒移动一次
                let elementPoint = { 'time': (i) * 4, 'coordinate': walk_man_path_arr[i] };
                // if (i + 1 == walk_man_path_arr.length) {
                //     elementPoint = { 'time': (i) * 4, 'coordinate': walk_man_path_arr[i], "rotation": [0, 90, 0] };
                // }
                walkManPointArr.push(elementPoint);
            }
            walkTime = walkManPointArr[walkManPointArr.length - 1].time;
            //设置视角跟随相机
            if (status == 2) {
                __g.customObject.focus('walkman_walk', 1);
            }

            // 人物高亮
            __g.customObject.highlight('walkman_walk');
            //人物按轨迹移动
            __g.customObject.startMove('walkman_walk', 0, walkManPointArr);
            //设置跟随相机
            console.log(status, '222222222222222222222222222222222222')
            __g.customObject.focus('walkman_walk', -1);

            //运动结束后切换为静止人物
            let timeOut = walkTime * 1000 + 1500;
            // let location = [493139.25, 2492023, 2.3132898807525635];
            setTimeout(() => {
                this.switchStaticMan(1)
            }, timeOut)
        },

        //当人物跑到终点时切换为静止人物
        switchStaticMan(mode) {
            let static_man_location = [];
            if (mode == "1") {
                static_man_location = [488328.25125000003, 2493019.36, 3.1329998779296875];
            }
            // if (mode == "2") {
            //     static_man_location = [493228.21875, 2492001.5, 1.7359277009963989];
            // }
            __g.customObject.unhighlight('walkman_walk');
            //运动结束后切换为静止人物
            __g.customObject.clear();
            //静止人物模型材质路径 UE工程内Actor文件路径
            var static_man_file_path = "/JC_CustomAssets/BP_Idle";
            //人物运动的终点坐标 static_man_location
            let walkmanCustomObjStatic = {
                id: 'walkman_static',//自定义对象唯一id
                pakFilePath: '@path:DTS_Library_V5.4_05.23.pak',//pak文件路径
                assetPath: static_man_file_path,//静止人物模型路径
                location: static_man_location,//位置坐标
                coordinateType: 0,// 坐标系类型 
                rotation: [0, 0, 0],//旋转
                scale: [1, 1, 1],//缩放
                smoothMotion: 1,   //1: 平滑插值，0: 跳跃
            };
            __g.customObject.add(walkmanCustomObjStatic);
        },

        //生成风机
        switchStaticFan(mode) {
            let static_man_location = [
                [488278.34, 2493045.6, 0],
                [488279.715, 2493268.96, 0.310859375],
                [488203.12625000003, 2492660, 0]
            ];
            var static_man_file_path = "/JC_CustomAssets/ObjectLibrary/Exhibition/场景/发电/风车";
            static_man_location.forEach((item, index) => {
                let walkmanCustomObjStatic = {
                    id: 'walkman_fan' + index,//自定义对象唯一id
                    groupId: '风机',
                    userData: JSON.stringify({ name: index + '风机' }),
                    pakFilePath: '@path:DTS_Library_V5.4_05.23.pak',//pak文件路径
                    assetPath: static_man_file_path,//静止人物模型路径
                    location: item,//位置坐标
                    coordinateType: 0,// 坐标系类型 
                    rotation: [0, 0, 0],//旋转
                    scale: [0.45, 0.45, 0.45],//缩放
                    smoothMotion: 1,   //1: 平滑插值，0: 跳跃
                };
                __g.customObject.add(walkmanCustomObjStatic);
            })

            const businessMakerOpt = {
                id: "", //maker唯一标识
                coordinate: [], //坐标位置
                coordinateType: 0, //坐标系类型
                imagePath: window.origin, //图片路径
                imageSize: [62, 62],
                // popupBackgroundColor: [1.0, 1.0, 1.0, 0.1],//弹窗背景色
                range: [0, 8000000], //标签的可见范围 [Min,Max]
                showLine: false, //标签下方是否显示垂直牵引线
                text: "", //标签显示的文字
                textSize: 13, // 文字大小
                textRange: 8000000, //文字的可见范围
                textColor: "#ffffff", //文字颜色
                useTextAnimation: false,
                groupId: "business",
                userData: "",
                displayMode: 2,
                textBackgroundColor: [0, 0, 0, 0],
                textOffset: [-60, 8],
            };
            for (let k in this.buildPoint) {
                console.log(k)
                this.buildPoint[k].forEach((cord, index) => {
                    console.log(cord, index, k + '-' + index)
                    // const makerOpt = businessMakerOpt
                    const makerOpt = Object.assign({}, businessMakerOpt);
                    makerOpt.id = k + '-' + index
                    makerOpt.coordinate = cord
                    makerOpt.groupId = '发电站'
                    makerOpt.userData = JSON.stringify({ name: k + '发电站' })
                    makerOpt.textOffset = [-100, -16]
                    makerOpt.imagePath = `${window.origin}/img/${k}.png`
                    this.build.push(makerOpt)
                })
            }
            console.log(this.build, 'this.build')
            // 添加一个或多个标注点 
            __g.marker.add(this.build)

        },

        // 加载AreaChartTy的数据
        loadAreaData() {
            this.areaData = this.loadData('x', 'y', 500, 100)
        },
        // 模拟echars数据
        loadData(x, y, max, min, before = '', after = '月') {
            let data = []
            for (let i = 0; i < 12; i += 1) {
                data.push({
                    [x]: `${before}${i + 1}${after}`,
                    [y]: Math.floor(Math.random() * max) + min
                })
            }
            return data
        },

        //获取镜头位置
        cameraGet() {
            __g.camera.get().then(result => {
                console.log("green", '相机位置信息：[' + result.camera + ']');
            });
        },
        // 室内操作
        indoorOperation() {
            //移动相机至人物运动视角
            __g.camera.set(488327.936055, 2493022.413438, 1.60511, -4.722932, -102.056374, 0);
            this.dialogStoreName = '室内'

        },

    }
}
</script>
<style scoped lang="less">
.bodyContent {
    position: absolute;
    top: 20px;
    width: 98%;
}

#player {
    width: 100%;
    height: 85vh;
    background-color: black;
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.left_box {
    position: absolute;
    top: 0;
    height: 86vh;
    width: 30%;
    background: url('../../assets/icons/leftinfo_bg.png') no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    z-index: 3;
    left: -3px;

    .content {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        position: absolute;
        background: url('../../assets/icons/leftinfo_bg.png') no-repeat;
        background-size: 100% 100%;
        top: 0;
        left: 0;
    }
}

.right_box {
    position: absolute;
    top: 0;
    right: 0;
    height: 86vh;
    width: 30%;
    background: url('../../assets/icons/rightinfo_bg.png') no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    z-index: 3;

    .content {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        position: absolute;
        background: url('../../assets/icons/rightinfo_bg.png') no-repeat;
        background-size: 100% 100%;
        top: 0;
        left: 0;
    }
}

.header-bar {
    position: absolute;
    width: 100%;
    height: 85px;
    left: 0%;
    top: 0;
    background: url('../../assets/icons/top_bg.png') no-repeat;
    background-size: 100% 100%;
    z-index: 40;
    display: flex;
    justify-content: center;
}

.bar-item {
    background: url("../../assets/icons/menu2_single_bg_choosen@2x.png") no-repeat;
    background-size: 100% 100%;
    opacity: 0.8;
    width: 156px;
    height: 30px;
    line-height: 30px;
    letter-spacing: 1.5;
    text-align: center;
    cursor: pointer;
    position: relative;
    margin-top: 80px;
    color: #c0bfbf;
}

.bar-item:hover,
.bar-item-active {
    background: url("../../assets/icons/menu2_single_bg@2x.png") no-repeat;
    background-size: 100% 100%;
    color: #ffffff;
    text-align: center;
    opacity: 1;
}

/deep/.__startupInfoPanel {
    left: 42% !important;
    top: 15%;
}

.row {
    display: flex;
    color: #fff;
    margin-top: 5px;
}

.item {
    display: flex;
    color: #fff;
    margin-top: 5px;
    width: 50%;
}

.label {
    width: 5em;
    font-size: 14px;
    /* padding: 0.3em 0; */
    padding-left: 5px;
    border-left: 1px solid #73c4ad;
    margin-left: 10px;
    color: #fff;
}

.value {
    flex: 1;
    font-size: 14px;
    /* padding: 0.3em 0; */
    text-align: left;
}

.echartsTitle {
    color: #ffffff;
    text-align: center;
    position: absolute;
    bottom: 20px;
    left: 20px;
}

.echartsTitle1 {
    color: #ffffff;
    text-align: center;
    position: absolute;
    bottom: 0px;
    left: 20px;
}

/deep/ .ant-slider {
    padding-top: 0;
    margin-top: 10px;
}

/deep/.ant-slider-track,
/deep/.ant-slider:hover .ant-slider-track {
    background-color: #73c4ad;
}

.addBtn {
    background-color: #327EFC !important;
    background: #327EFC !important;
    border-color: #327EFC !important;
    color: #fff !important;
    margin-left: 10px;
}

.addBtn:active,
.addBtn.hover,
.addBtn:focus {
    background-color: #327EFC !important;
    background: #327EFC !important;
    border-color: #327EFC !important;
    color: #fff !important;
}

.footerBtn {
    margin-left: 10px;
}

.out-content {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;

    img {
        width: 95%;
        height: 150px;
        margin-bottom: 20px;
        margin-top: 10px;
    }

    p {
        padding-left: 1%;
        width: 49%;
        height: 30px;
        line-height: 30px;
        color: #fff;
        font-size: 12px;
    }
}
</style>
